﻿<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>全屏布局</title>
<link rel="stylesheet" type="text/css" href="demo.css">
<style type="text/css">
	html,body,.parent{margin:0;height:100%;overflow:hidden;}
	body{color:white;} 
	.parent{display:flex;flex-direction:column;}
	.top{background:blue;}
	.bottom{background:black;}
	.middle{flex:1;display:flex;}
	.left{background: red;}
	.right{flex:1;overflow:auto;background: pink;}
	.right .inner{min-height:1000px;}
</style>
</head>
<body>
	<div class="parent">
		<div class="top">top</div>
		<div class="middle">
			<div class="left">left</div>
			<div class="right">
				<div class="inner">right</div>
			</div>
		</div>
		<div class="bottom">bottom</div>
	</div>
</body>
</html>